/*
 * @Author: aFei
 * @Date: 2022-07-27 14:00:00
*/
/*
 * @LastEditors: aFei
 * @LastEditTime: 2023-06-29 16:53:01
*/
html.dark .vue-permission-breads-plus {
  --permis-bread-bg            : rgb(24, 24, 28);
  border-bottom-color          : rgb(24, 24, 28);
  --permis-bread-position-color: rgba(255, 255, 255, 0.82);
  --permis-bread-back-color    : rgba(255, 255, 255, 0.82);
}

.vue-permission-breads-plus {
  --permis-bread-height        : 50px;
  --permis-bread-bg            : #fff;
  --permis-bread-position-color: #000;
  --permis-bread-color         : #8998a6;
  --permis-bread-active-color  : #000;
  --permis-bread-back-color    : #000;
  display                      : flex;
  justify-content              : space-between;
  height                       : var(--permis-bread-height);
  border-bottom                : 1px solid #cbcbcd;
  align-items                  : center;
  background                   : var(--permis-bread-bg);
  color                        : var(--permis-bread-position-color);
  padding                      : 0 1vw;

  // 简易模式
  &.simple {
    display          : inline-flex;
    --permis-bread-bg: transparent !important;
    border-bottom    : 0;
  }

  .left {
    display    : flex;
    align-items: center;
  }

  ul {
    display    : flex;
    align-items: center;

    li {
      color      : var(--permis-bread-active-color);
      cursor     : pointer;
      display    : inline-flex;
      align-items: center;
      line-height: 1.5;
      white-space: nowrap;

      &:last-child {
        color       : var(--permis-bread-color);
        margin-right: 0;
        cursor      : text;
      }

      .menu-icon {
        margin-right: 4px;
      }

      .space-icon {
        margin: 0 6px;
      }
    }
  }

  .back {
    color      : var(--permis-bread-back-color);
    cursor     : pointer;
    display    : flex;
    align-items: center;

    &.icon-left {
      i {
        margin-right: 4px;
      }
    }

    &.icon-right {
      i {
        margin-left: 4px;
      }
    }
  }
}